<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>

</body>
<script>
    // ===========================================================
    // 同步异步
    // 同步:
    // function a(num) {
    //     console.log(num);
    // }
    // a(4);
    // console.log([]);
    // console.log({});


    // 异步：放入任务列表中
    // stInterval 设置的时间往往不准
    // setInterval(function () {
    //     console.log('stInterval');
    // }, 3000)



    // // 使用setTimeout模拟stInterval
    // // 2.requestAnimationFrame
    // function mystInterval(cd, time) {
    //     var timer = setTimeout(function () {
    //         cd && cd();
    //         mystInterval(cd, time);
    //     }, time)

    // }
    // mystInterval(function () {
    //     console.log('使用setTimeout模拟stInterval');
    // }, 500)


    // // 异步请求
    // // Promise
    // new Promise(function (a, b) {
    //     console.log('同步代码 Promise构造函数');
    //     a(1);

    // }).then(res => {
    //     console.log('异步代码 then方法', res);

    // })
    // ===========================================================
    // // 同步代码
    // console.log(1);
    // // 异步宏任务代码
    // setTimeout(function () {
    //     0
    //     console.log(2);
    // }, 0)
    // // 同步代码
    // console.log(3);
    // // 同步代码宏任务
    // new Promise(function (a, b) {
    //     console.log(4);
    //     a();
    //     // 异步微任务代码
    //     resolve(4)
    // }).then((res) => {
    //     console.log(res);
    //     return 5 
    // }).then((res)=>{
    //     console.log(res);
        
    // })
    // // 异步宏任务代码
    // axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then(res => {
    //     console.log(6);
    // })
    // // 1 3 4 5 2 6
    // axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then(res => {
    //     console.log(6);

    // })

    // 事件循环：
    // 1、先执行同步代码，遇到异步任务（宏任务，微任务）会放入任务列表，
    // 2、同步代码执行完了会执行微任务列表里的微任务，微任务执行完了再去宏任务队列执行宏任务
    // 3、这样不断循环复制，就是事件循环



    // 1、先执行代码中的宏任务（同步代码），再执行微任务
    // 2、微任务完成了在执行宏任务，这样不断循环复制，就是事件循环



</script>

</html>